<template>
<div>
  <!-- 学生信息表 -->
  <el-table v-loading="loading" :data="tableData" style="width: 100%" >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="主讲:">
            <span>{{ props.row.lecture.lecAuthor }}</span>
          </el-form-item>
          <el-form-item label="时长:">
            <span>{{ props.row.lecture.lecHour }}小时</span>
          </el-form-item>
          <el-form-item label="详情介绍:">
            <span>{{ props.row.lecture.lecDetail }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="编号" prop="tickId">
    </el-table-column>
    <el-table-column label="标题" prop="lecture.lecName" align="center">
    </el-table-column>
    <el-table-column label="时间" prop="tickDate" :formatter="dateFormat" align="center">
    </el-table-column>
    <el-table-column label="地点" prop="tickAddress" align="center">
    </el-table-column>
    <el-table-column sortable label="票目" prop="tickNum" width="100" align="center">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
      <template slot-scope="scope">
        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"  size="small">移除</el-button>
        <el-button type="text"  @click="handleClick(scope.$index,scope.row),editDialogVisible = true" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="修改信息"  width="36%" :visible.sync="editDialogVisible">
    <el-form  :model="formData" status-icon ref="formData" >
      <el-form-item prop="tickNum">
        <el-input  type="number" placeholder="票目" size="large" v-model="formData.tickNum" > </el-input>
      </el-form-item>
      <el-form-item prop="tickAddress">
        <el-input type="text"  placeholder="地址" :maxlength="20" size="large" v-model="formData.tickAddress" > </el-input>
      </el-form-item>
      <el-form-item prop="tickDate">
        <el-date-picker style="width:100%;" v-model="formData.tickDate" type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateForm()">提交</el-button>
        <el-button @click="resetForm('formData'),editDialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
    <div class="pager">
      <el-pagination layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
      </el-pagination>      
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入！'))
        } else {
          callback();
        }
      }
      return {
        loading:true,
        editDialogVisible: false,
        formData:{},
        tableData: [],
        page: 1,
        currentPage: 1,
        totalCount: 0
      }
    },
    created(){
      this.getData(this.page)
      setTimeout(() => {
        this.loading = false
      },600)
    },
    methods: {
     dateFormat(row, column) {  
        return new Date(row[column.property]).toLocaleString()
      }, 
      getData(page){
        var _this = this
        this.$ajax.get('/api/getTickets?page=' + (page-1)).then(function(response){
          _this.tableData = response.data.data.content
          _this.totalCount = response.data.data.totalElements
        }).catch(function(error){console.log(error);}); 
      },
      handleCurrentChange(val) {
        this.getData(val)
      },
      deleteRow(index, rows) {
        var _this=this
        this.$ajax.get('/api/deleteTicket?tickId='+rows[index].tickId).then(function(response){
          _this.$message({message: "删除成功！", type: 'success'});
          setTimeout(function () {
            _this.getData(_this.page)
          }, 200);
        }).catch(function(error){_this.$message({message: "删除失败！", type: 'error'});console.log(error);}); 
        rows.splice(index, 1);
      },
      handleClick(index,row) {
        this.formData=row
      },
      updateForm() {
        var _this = this;
        this.$ajax.post('/api/updateTicket',
          _this.formData
          ).then(function(response){
            if(0==response.data.code){
              setTimeout(function () {
                _this.$message({message: response.data.data, type: 'success'});
              }, 500);
            }else if(1==response.data.code){
              _this.$message({message: response.data.msg, type: 'error'});
            }
            setTimeout(() => {
              _this.editDialogVisible = false
             }, 200);
          }).catch(function(error){console.log(error);})
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>



<style scoped>
.pager{margin-top:35px;text-align:center;}
</style>